<template>
  <div class="bottom_bar">
    <div class="selectall" @click="selectall()">
      <img class="icon" :src="isSelectedAll === false?unselectedIcon:selectedIcon">
      <span class="text">全选</span>
    </div>
    <div class="function" @click="changeFuntion()">
      <template v-if="isFunctionClear === false">
        <img class="icon" :src="clearIcon">
        <span class="text">清理</span>
      </template>
      <template v-else>
        <img class="icon" :src="finishIcon">
        <span class="text text_finish">完成</span>
      </template>
    </div>
    <div class="submitbutton">
      <div class="button" @click="exefunction()">
        <span class="text">
          <template v-if="isFunctionClear">删除</template>
          <template v-else>提交</template>
          <template v-if="number>0" >({{number}})</template>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import selectedIcon from '../../assets/img/icon/uploader_file_rb_s.svg'
import unselectedIcon from '../../assets/img/icon/uploader_file_rb_n.svg'
import clearIcon from '../../assets/img/icon/flashlight.svg'
import finishIcon from '../../assets/img/icon/flashlight_fec906.svg'
export default {
  name: 'bottom_bar',
  props: ['content', 'number', 'isSelectedAll'],
  data () {
    return {
      selectedIcon: selectedIcon,
      unselectedIcon: unselectedIcon,
      clearIcon: clearIcon,
      finishIcon: finishIcon,
      isFunctionClear: false
    }
  },
  methods: {
    selectall () {
      // 让父元素list中的selected全为true
      this.$parent.selectedAll()
    },
    changeFuntion () {
      this.isFunctionClear = !this.isFunctionClear
    },
    exefunction () {
      this.$emit('dofunction', this.isFunctionClear)
    }
  }
}
</script>

<style lang="scss" scoped>
  .bottom_bar{
    width: 100%;
    height: px2rem(54);
    background-color: #FFF;
    position: relative;
    .selectall {
      width: px2rem(78);
      height: px2rem(54);
      /*border: px2rem(2) solid red;*/
      position: absolute;
      left: px2rem(36);
      .icon{
        float: left;
        width: px2rem(44);
        height: px2rem(44);
        margin: px2rem(5) 0;
      }
      .text{
        /*width: px2rem(28);*/
        line-height: px2rem(54);
        font-size: $text-size-normal;
        /*border: px2rem(2) solid red;*/
        float: left;
      }
    }
    .function{
      width: px2rem(64);
      height: px2rem(54);
      /*border: px2rem(2) solid red;*/
      position: absolute;
      right: px2rem(111);
      .icon{
        float: left;
        width: px2rem(27);
        height: px2rem(24);
        margin: px2rem(15) 0;
      }
      .text{
        /*width: px2rem(28);*/
        line-height: px2rem(54);
        font-size: $text-size-normal;
        color: $text-color;
        /*border: px2rem(2) solid red;*/
        float: left;
      }
      .text_finish{
        color: #FEC906;
      }
    }
    .submitbutton{
      width: px2rem(90);
      height: px2rem(54);
      background-color: #FFF;
      position: absolute;
      right: px2rem(12);
      .button{
        width: px2rem(90);
        height: px2rem(44);
        margin: px2rem(5) 0;
        border-radius: px2rem(22);
        background: -webkit-linear-gradient(to right,#59C2FF,#02A4ED); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(to right,#59C2FF,#02A4ED); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(to right,#59C2FF,#02A4ED); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right,#59C2FF,#02A4ED); /* 标准的语法 */
        text-align: center;
        .text{
          font-size: $text-size-normal;
          color: #FFF;
          /*width: px2rem(76);*/
          height: px2rem(44);
          line-height: px2rem(44);
          /*border: px2rem(2) solid red;*/

        }
      }
    }
  }
</style>
